<template>
  <div class="tagsSelect" :class="size == 'mini' ? 'tagsSelectMin' : ''">
    <div
      class="tagsSelect-item" :style="itemWidth ? { width: itemWidth } : ''"
      :key="index"
      :class="key == item ? 'tagsSelect-items' : ''"
      v-for="(item, index) in props.list"
      @click="selects(item)"
    >
      {{ item }}
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{
  list: Array<string>; // 标签列表
  types?: string;
  size?: string;
  itemWidth?: string;
}>();
const key = ref(props.types); // 选中标签的key
const size = ref(props.size); // 选中标签的key

//console.log(size.value);
const selects = (item: string) => {
  // 触发选择事件
  key.value = item;
  callParent();
};
const emit = defineEmits(['call-parent']);
const callParent = () => {
  emit('call-parent', key.value);
};
</script>
<style lang="scss">
.tagsSelect {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 4px;
  .tagsSelect-item {
    display: flex;
    flex-wrap: wrap;
    width: 110px;
    padding: 4px 24px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    justify-content: center;
    // line-height: 48px;
    position: relative;
  }
  .tagsSelect-items {
    color: var(--el-color-primary) !important;
  }
  .tagsSelect-items::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--el-color-primary);
  }
}
.tagsSelectMin {
  .tagsSelect-item {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    justify-content: center;
    line-height: 52px;
    position: relative;
  }
  .tagsSelect-items::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 70%;
    height: 2px;
    left: 15%;
    background-color: var(--el-color-primary);
  }
}
</style>
